<template>
	<view class="uni-tooltip">
		<slot></slot>
		<view v-if="content || $slots.content" class="uni-tooltip-popup"   
		:style="{'top':styleType==0?'-120rpx':'-60rpx','width':styleType2==1?'280rpx':'240rpx','text-align':styleType2==1?'left':'','left':styleType3==1?'-60rpx':styleType3==8?'0':''}">
			<slot name="content">
				<view style="display: flex;justify-content: center;align-items: center;white-space: pre-wrap;text-align: left;font-size: 20rpx;letter-spacing: 1px;overflow: hidden;" v-if="styleType4==1">
					<text style="width: 100%;">{{content}}</text>
				</view>
				<view v-else>{{content}}</view>
			</slot>
		</view>
	</view>
</template>


<script>
	/**
	 * Tooltip 提示文字
	 * @description 常用于展示鼠标 hover 时的提示信息。
	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-tooltip
	 * @property {String} content   弹出层显示的内容
	 * @property {String}  placement出现位置, 目前只支持 left
	 */


	export default {
		name: "uni-tooltip",
		data() {
			return {

			};
		},
		props: {
			styleType: {
				type: Number,
				default: 0
			},
			styleType2: {
				type: Number,
				default: 0
			},
			styleType3: {
				type: Number,
				default: 0
			},
			styleType4: {
				type: Number,
				default: 0
			},
			content: {
				type: String,
				default: ''
			},

			placement: {
				type: String,
				default: 'top'
			},
		}
	}
</script>

<style>
	.uni-tooltip {
		position: relative;
		cursor: pointer;
	}

	.uni-tooltip-popup {
		/* width: 270rpx; */
		
		z-index: 1;
		display: none;
		position: absolute;
		top: -120rpx;
		left: -180rpx;
		background-color:rgba(0,0,0,0.5);
		border-radius: 8px;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 16px;
		width: 240rpx;
		padding: 15rpx 15rpx;
	}
    .tooltip-popup222 {
    	width: 270rpx;
    	z-index: 1;
    	display: none;
    	position: absolute;
    	top: -80rpx;
    	left: -180rpx;
    	background-color:rgba(0,0,0,0.6);
    	border-radius: 8px;
    	color: #fff;
    	font-size: 20rpx;
    	text-align: left;
    	line-height: 16px;
    	padding: 12px;
    }

	.uni-tooltip:hover .uni-tooltip-popup {
		display: block;
	}
</style>
